<template>
    <v-container v-loading="loading">
        <v-layout row wrap>
            <v-flex xs6 offset-xs3>
                <v-card tile>
                    <v-list>
                        <v-subheader>
                            <span style="flex: 1">Profile</span>
                            <div>
                                <v-btn text @click="editUser">编辑</v-btn>
                            </div>
                        </v-subheader>
                        <v-list-item @click="handler" v-for="(item, index) in listItem" :key="index">
                            <v-list-item-icon>
                                <v-icon>{{item.icon}}</v-icon>
                            </v-list-item-icon>
                            <v-list-item-title>{{item.title}}</v-list-item-title>
                            <v-list-item-subtitle v-text="user[item.key]" v-if="item.key === 'desc'" class="text-lg-right"></v-list-item-subtitle>
                            <v-list-item-action v-else>
                                <span v-if="item.key === 'roles'">
                                    <v-chip v-for="(e,x) in user.roles" :key="x" pill color="primary" outlined>{{e.display_name}}</v-chip>
                                </span>
                                <template v-else-if="item.key !== 'avatar'">{{user[item.key]}}</template>
                                <v-avatar v-else :size="30" class="justify-end">
                                    <img :src="user[item.key]" alt="">
                                </v-avatar>
                            </v-list-item-action>
                        </v-list-item>
                    </v-list>
                </v-card>
            </v-flex>
        </v-layout>
        <v-navigation-drawer v-model="drawer" right :width="450" temporary fixed v-loading="loading">
            <profile-form v-model="form" @submit="update">
                <v-btn block color="success" type="submit">提交</v-btn>
            </profile-form>
        </v-navigation-drawer>
    </v-container>
</template>

<script>
    import userInfoApi from '@/comment/apis/user/Info';
    import userAuthApi from '@/comment/apis/user/Auth';
    import ProfileForm from "@/components/form/ProfileForm";

    export default {
        components: {ProfileForm},
        data () {
            return {
                loading: false,
                user: {},
                listItem: [
                    {
                        icon: 'mdi-account-badge',
                        key: 'name',
                        title: '用户名'
                    }, {
                        icon: 'mdi-image-filter-hdr',
                        key: 'avatar',
                        title: '头像'
                    }, {
                        icon: 'mdi-email',
                        key: 'email',
                        title: '邮箱'
                    }, {
                        icon: 'mdi-cellphone',
                        title: '手机号',
                        key: 'phone'
                    },{
                        icon: 'description',
                        title: '简介',
                        key: 'desc'
                    }, {
                        icon: 'mdi-account-supervisor',
                        title: '角色',
                        key: 'roles'
                    }
                ],
                drawer: false,
                form: {},
                oldForm: {}
            }
        },
        methods: {
            getData () {
                this.loading = true;
                userAuthApi.userInfo({role: true}).then(res => {
                    this.$util.handelHttpResponse(res, false).then(({data}) => {
                        this.user = data;
                    })
                }).finally(() => this.loading = false)
            },
            update () {
                this.loading = true;
                let params = this.$util.objectDiff(this.form, this.oldForm);
                userInfoApi.updateMe(this.user.id, params).then(res => {
                    this.$util.handelHttpResponse(res, true).then(() => {
                        this.drawer = false;
                        this.getData();
                    })
                }).finally(() => this.loading = false)
            },
            handler () {},
            editUser () {
                this.form = this.$util.deepClone(this.user);
                this.oldForm = this.$util.deepClone(this.user);
                this.drawer = true;
            }
        },
        mounted() {
            this.getData()
        }
    }
</script>

<style scoped lang="scss">
    .v-list-item__action {
        width: auto;
        justify-content: flex-end;
    }
    .v-chip {
        width: max-content;
    }
</style>